<template>
  <div>
    <!-- -----------------------------分页显示数据--------------------------------------- -->
    <el-table :data="supplierList" border style="width: 100%">
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <el-table-column prop="supplierName" label="名字" width="120">
      </el-table-column>
      <el-table-column prop="mobileNo" label="电话" width="150">
      </el-table-column>
      <el-table-column prop="contact" label="联系人" width="120">
      </el-table-column>
      <el-table-column prop="email" label="邮箱" width="220">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="150">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="150">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <el-button type="danger" slot="reference" size="small" icon="el-icon-delete">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- -----------------------------修改----------------------------------------->
    <el-dialog title="修改供应商" :visible.sync="dialog.updateShow" width="30%">
      <el-form :model="updateSupplier">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="updateSupplier.supplierName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="updateSupplier.mobileNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth">
          <el-input v-model="updateSupplier.contact" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="updateSupplier.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="updateSupplier.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="updateSupplier.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ------------------------------------添加操作------------------------------------ -->
    <el-dialog title="添加供应商" :visible.sync="dialog.addShow" width="30%">
      <el-form ref="addForm" :model="addSupplier" :rules="rules">
        <el-form-item label="编号" prop="supplierNo">
          <el-input v-model="addSupplier.supplierNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名字" prop="supplierName">
          <el-input v-model="addSupplier.supplierName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addSupplier.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="座机电话" prop="telNo">
          <el-input v-model="addSupplier.telNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="addSupplier.mobileNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="addSupplier.contact" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="level">
          <el-input v-model="addSupplier.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addSupplier.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="addSupplier.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ------------------------------------------------------------------------>
    <div style="text-align: left; margin-right: 20px">
      <el-button type="primary" round @click="dialog.addShow = true">添加</el-button>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      supplierList: [],
      updateSupplier: [],
      addSupplier: {},
      dialog: {
        addShow: false,
        updateShow: false,
      },
    };
  },
  methods: {
    add() {
      this.$axios.post("/suppliers/", this.addSupplier).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.addShow = false; //关于模态框
          this.$refs.addForm.resetFields(); //清空表单数据
          this.loadSuppliers(); //重新加载数据
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    update() {
      this.$axios.put("/suppliers/", this.updateSupplier).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.updateShow = false; //关于模态框
          this.loadSuppliers(); //重新加载数据
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleEdit(id) {
      this.$axios.get("/suppliers/" + id).then((res) => {
        this.updateSupplier = res.data.data.supplier;
        this.dialog.updateShow = true; //显示模态框
      });
    },
    handleDelete(id) {
      this.$axios.delete("/suppliers/" + id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadSuppliers(); //重新加载数据
        } else {
          this.$message.error(res.data.message);
        }
      });
    },

    loadSuppliers() {
      this.$axios.post("/suppliers/queryAll", this.query).then((res) => {
        this.supplierList = res.data.data.list; //返回当前页数据
      });
    },

  },
  mounted() {
    this.loadSuppliers();
  },
};
</script>